<template>
  <div class="filter my-4 flex justify-between">
    <div class="filter-left flex gap-x-4">
      <template v-if="user">
        <el-button type="primary" @click="emit('create')"> 添加域名 </el-button>
        <el-button
          type="primary"
          plain
          class="ml-0"
          :disabled="!isSelect"
          @click="emit('join-group')"
        >
          加入分组
        </el-button>
        <el-button class="ml-0" @click="emit('batch')"> 批量操作 </el-button>
      </template>
      <el-button
        v-if="!user"
        type="primary"
        class="ml-0"
        :disabled="!isSelect"
        @click="emit('join-group')"
      >
        加入分组
      </el-button>
      <!-- v-loading="!!groupId && !groupOpts.length" -->
      <!-- element-loading-background="rgba(225,225,225,0.5)" -->
      <el-select
        :model-value="getSelectValue(groupId, groupOpts)"
        class="w-[130px]"
        filterable
        remote
        placeholder="请选择分组"
        remote-show-suffix
        :remote-method="groupRemoteMethod"
        :loading="groupLoading"
        @update:model-value="groupId = $event"
      >
        <el-option label="所有组" value="" />
        <el-option
          v-for="item in groupOpts"
          :key="item.label"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <!-- @update:model-value="groupId = $event" -->
      <!-- :model-value="!groupId || groupOpts.length ? groupId : undefined" -->

      <!-- <el-select
        v-model="queryParams.name"
        class="w-[168px]"
        filterable
        remote
        placeholder="请输入域名"
        :loading="domainLoading"
        clearable
        :remote-method="domainRemoteMethod"
        @change="handleSearch"
      >
        <el-option
          v-for="item in domainOpts"
          :key="item.label"
          :label="item.label"
          :value="item.value"
        />
      </el-select> -->

      <!-- <ElInput
        v-model="queryParams.name"
        placeholder="请输入域名"
        class="w-[168px]"
        clearable
      /> -->

      <el-input
        v-model="searchKeyword"
        class="w-[360px] search-input"
        :placeholder="placeholder"
        clearable
      >
        <template #prepend>
          <el-select
            v-model="activeSearchType"
            placeholder="请选择"
            class="w-24"
          >
            <el-option
              v-for="item in searchTypeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </template>
        <template #append>
          <el-button :icon="Search" @click="handleSearch" />
        </template>
      </el-input>

      <!-- <el-autocomplete
        ref="desRef"
        v-model="queryParams.remark"
        class="w-[240px]"
        placeholder="请输入备注"
        clearable
        :fetch-suggestions="desFetch"
        @change="handleSearch"
        @select="handleSearch"
      >
        <template #append>
          <el-button :icon="Search" @click="handleSearch" />
        </template>
      </el-autocomplete> -->
      <!-- <el-button type="primary" @click="handleSearch">搜索</el-button> -->
      <BasicRefreshBtn :loading="!!loading" @click="emit('refresh')" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { Search } from '@element-plus/icons-vue'
import type { Ref } from 'vue'

import type { UserModel } from '@/apis/model/user'
import { useSelectRemote } from '@/hooks/useSelectRemote'

import type { IQuery } from './types'

interface IEmit {
  (event: 'create'): void
  (event: 'join-group'): void
  (event: 'batch'): void
  (event: 'search'): void
  (event: 'refresh'): void
}

interface IProps {
  isSelect: boolean
  loading?: boolean
}

const emit = defineEmits<IEmit>()
defineProps<IProps>()

const user = inject<Ref<UserModel>>('user')
const queryParams = inject<IQuery>('queryParams') as IQuery

/**
 * 多类型搜索
 */
const searchTypeOptions = [
  { label: '域名', value: 'name' },
  { label: '备注', value: 'remark' },
  { label: '用户', value: 'username' }
]

// 用户没有筛选用户
if (user?.value) searchTypeOptions.splice(2, 1)

const { activeSearchType, searchKeyword, placeholder } = useMultipartSearch(
  searchTypeOptions,
  queryParams
)
// const {
//   loading: domainLoading,
//   remoteMethod: domainRemoteMethod,
//   opts: domainOpts
// } = useSelectRemote(domainListApi, {
//   valueKey: 'name',
//   labelKey: 'name',
//   queryKey: 'name'
// })

// domainRemoteMethod('')

// const desRef = ref()
// const { fetchFn: desFetch } = useSearch('remark', dnsServerListApi, {
//   domRef: desRef
// })

const groupId = computed<string>({
  get: () => {
    if (user?.value) {
      return queryParams.group_id as string
    }
    return queryParams.admin_group_id as string
  },
  set: value => {
    if (user?.value) {
      queryParams.group_id = value
    } else {
      queryParams.admin_group_id = value
    }
  }
})
watch(groupId, () => handleSearch())

/**
 * 分组列表，有user，则获取user的分组列表，没有则获取所有分组
 */
const fn = user?.value ? userDomainGroupListApi : domainGroupListApi
const {
  remoteMethod: groupRemoteMethod,
  loading: groupLoading,
  opts: groupOpts
} = useSelectRemote(fn, {
  valueKey: 'id',
  labelKey: 'name',
  queryKey: 'name',
  defaultState: {
    user_id: user?.value?.id
  }
})

groupRemoteMethod('')

/**
 * 复合搜索
 */
// const searchOptions: LabelValue[] = [
//   { label: '域名', value: 'name' },
//   { label: '备注', value: 'remark' }
// ]
// const { activeSearchType, searchKeyword } = useMultipartSearch(
//   searchOptions,
//   queryParams
// )

const handleSearch = () => emit('search')
onMounted(handleSearch)
</script>

<style scoped lang="scss"></style>
